<template>
  <section id="five-star-assessment">
    <div class="firstStar">
      <i :class="starStates.firstStar" class="iconfont"></i>
    </div>
    <div class="secondStar">
      <i :class="starStates.secondStar" class="iconfont"></i>
    </div>
    <div class="thirdStar">
      <i :class="starStates.thirdStar" class="iconfont"></i>
    </div>
    <div class="fourthStar">
      <i :class="starStates.fourthStar" class="iconfont"></i>
    </div>
    <div class="fifthStar">
      <i :class="starStates.fifthStar" class="iconfont"></i>
    </div>
  </section>
</template>
<script>
  // import MuIcon from 'muse-components/icon'
  export default {
    components:{
      // MuIcon
    },
    props:{
      score: {
        required: true,
        type: Number
      },
      color: {
        required: false,
        type: String
      },
      size: {
        required: false,
        type: Number
      }
    },
    data(){
      return {
        starStates: {
          firstStar: 'icon-shixinxing',
          secondStar: 'icon-shixinxing',
          thirdStar: 'icon-shixinxing',
          fourthStar: 'icon-shixinxing',
          fifthStar: 'icon-shixinxing'
        }
      }
    },
    created(){
      /**@augments
       * 需要UI提供 空五角星  实心五角星 半个五角星 的图标  然后给各个五角星的class赋值
       */
      this.starStates = this.getStarStates(this.score)
    },
    watch:{
      'score':function(val){
        this.starStates = this.getStarStates(val)
      }
    },
    methods:{
      getStarStates(val) {
        if (val >= 100) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-shixinxing',
            fourthStar: 'icon-shixinxing',
            fifthStar: 'icon-shixinxing'
          }
        } else if (val >= 90) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-shixinxing',
            fourthStar: 'icon-shixinxing',
            fifthStar: 'icon-banxing'
          }
        } else if (val >= 80) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-shixinxing',
            fourthStar: 'icon-shixinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 70) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-shixinxing',
            fourthStar: 'icon-banxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 60) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-shixinxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 50) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-banxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 40) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-shixinxing',
            thirdStar: 'icon-kongxinxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 30) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-banxing',
            thirdStar: 'icon-kongxinxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 20) {
          return {
            firstStar: 'icon-shixinxing',
            secondStar: 'icon-kongxinxing',
            thirdStar: 'icon-kongxinxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else if (val >= 10) {
          return {
            firstStar: 'icon-banxing',
            secondStar: 'icon-kongxinxing',
            thirdStar: 'icon-kongxinxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        } else {
          return {
            firstStar: 'icon-kongxinxing',
            secondStar: 'icon-kongxinxing',
            thirdStar: 'icon-kongxinxing',
            fourthStar: 'icon-kongxinxing',
            fifthStar: 'icon-kongxinxing'
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "../scss/variables.scss";
  #five-star-assessment {
    display: inline-block;
  }
  #five-star-assessment .firstStar,#five-star-assessment .secondStar,#five-star-assessment .thirdStar,#five-star-assessment .fourthStar,#five-star-assessment .fifthStar {
    display: inline-block;
  }
  #five-star-assessment .iconfont{
    font-size: 20px;
  }
</style>
